<template>
	<div class="box">
		<div id="screenshot">
			<text class="title">重要健康体检指标及其动态分析评估报告</text>
			<!-- 只有一次 -->
			<table v-if="info.oldHealthExaminationReportEntityRes && !info.oldHealthExaminationReportEntityRes.id">
				<tr>
					<th><span>检査指标</span></th>
					<th><span>{{info && info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes.fillFormDate || info.fillFormDate}}</span></th>
					<th><span>评估</span></th>
					<th><span>日期</span></th>
					<th><span>评估</span></th>
					<th><span>参考范围</span></th>
					<th><span>风险趋势</span></th>
				</tr>
				<tr v-for="(item,index) in arr" :key="index">
					<td><span v-html="item.name"></span></td>
					<td><span>{{(info && info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes[item.key] || info[item.key]) == '-1'?'未填写':info && info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes[item.key] || info[item.key]}}</span></td>
					<td><span>{{(info && info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes.setReport && info.newHealthExaminationReportEntityRes.setReport[item.key]  || info.setReport && info.setReport[item.key]) == '-1'?'未填写':info && info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes.setReport && info.newHealthExaminationReportEntityRes.setReport[item.key]  || info.setReport && info.setReport[item.key]}}</span></td>
					<td><span></span></td>
					<td><span></span></td>
					<td><span>{{info && info.consult ? info.consult[index]  : info && info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes.consult && info.newHealthExaminationReportEntityRes.consult[index]}}</span></td>
					<td><span>{{(info && info.oldHealthExaminationReportEntityRes && info.oldHealthExaminationReportEntityRes.examinationReportVo && info.oldHealthExaminationReportEntityRes.examinationReportVo[item.key]) == -1?'未填写':info && info.oldHealthExaminationReportEntityRes && info.oldHealthExaminationReportEntityRes.examinationReportVo && info.oldHealthExaminationReportEntityRes.examinationReportVo[item.key]}}</span></td>
				</tr>
				
				<tr v-for="(item,index) in info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes.auxiliaryExamination && JSON.parse(info.newHealthExaminationReportEntityRes.auxiliaryExamination) || info.auxiliaryExamination && JSON.parse(info.auxiliaryExamination)" :key="'a'+index">
					<td><span>{{item.name}}</span></td>
					<td><span>{{item.value == '-1'?'未填写':item.value}}</span></td>
					<td><span></span></td>
					<td><span></span></td>
					<td><span></span></td>
					<td><span>正常</span></td>
					<td><span></span></td>
				</tr>
			</table>
			<table v-else>
				<tr>
					<th><span>检査指标</span></th>
					<th><span>{{info && info.oldHealthExaminationReportEntityRes && info.oldHealthExaminationReportEntityRes.fillFormDate}}</span></th>
					<th><span>评估</span></th>
					<th><span>{{info && info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes.fillFormDate || info.fillFormDate || '日期'}}</span></th>
					<th><span>评估</span></th>
					<th><span>参考范围</span></th>
					<th><span>风险趋势</span></th>
				</tr>
				<tr v-for="(item,index) in arr" :key="index">
					<td><span v-html="item.name"></span></td>
					<td><span>{{(info && info.oldHealthExaminationReportEntityRes && info.oldHealthExaminationReportEntityRes[item.key]) == '-1' ? '未填写':info && info.oldHealthExaminationReportEntityRes && info.oldHealthExaminationReportEntityRes[item.key]}}</span></td>
					<td><span>{{(info && info.oldHealthExaminationReportEntityRes && info.oldHealthExaminationReportEntityRes.setReport && info.oldHealthExaminationReportEntityRes.setReport[item.key])== '-1'?'未填写':info && info.oldHealthExaminationReportEntityRes && info.oldHealthExaminationReportEntityRes.setReport && info.oldHealthExaminationReportEntityRes.setReport[item.key] }}</span></td>
					<td><span>{{(info && info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes[item.key] || info[item.key]) == '-1'?'未填写':info && info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes[item.key] || info[item.key]}}</span></td>
					<td><span>{{(info && info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes.setReport && info.newHealthExaminationReportEntityRes.setReport[item.key]  || info.setReport && info.setReport[item.key]) == '-1'?'未填写':info && info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes.setReport && info.newHealthExaminationReportEntityRes.setReport[item.key]  || info.setReport && info.setReport[item.key]}}</span></td>
					<td><span>{{info && info.consult ? info.consult[index]  : info && info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes.consult && info.newHealthExaminationReportEntityRes.consult[index]}}</span></td>
					<td><span>{{(info && info.oldHealthExaminationReportEntityRes && info.oldHealthExaminationReportEntityRes.examinationReportVo && info.oldHealthExaminationReportEntityRes.examinationReportVo[item.key]) == -1?'未填写':info && info.oldHealthExaminationReportEntityRes && info.oldHealthExaminationReportEntityRes.examinationReportVo && info.oldHealthExaminationReportEntityRes.examinationReportVo[item.key]}}</span></td>
				</tr>
				<tr v-for="(item,index) in info.oldHealthExaminationReportEntityRes && info.oldHealthExaminationReportEntityRes.auxiliaryExamination && JSON.parse(info.oldHealthExaminationReportEntityRes.auxiliaryExamination)" :key="'a'+index">
					<td><span>{{item.name}}</span></td>
					<td><span>{{item.value == '-1'?'未填写':item.value}}</span></td>
					<td><span></span></td>
					<td><span>{{index <= 2 ? ((info && info.oldHealthExaminationReportEntityRes && info.oldHealthExaminationReportEntityRes.auxiliaryExamination && JSON.parse(info.oldHealthExaminationReportEntityRes.auxiliaryExamination)[index] && JSON.parse(info.oldHealthExaminationReportEntityRes.auxiliaryExamination)[index].value)=='-1'?'未填写':info && info.oldHealthExaminationReportEntityRes && info.oldHealthExaminationReportEntityRes.auxiliaryExamination && JSON.parse(info.oldHealthExaminationReportEntityRes.auxiliaryExamination)[index] && JSON.parse(info.oldHealthExaminationReportEntityRes.auxiliaryExamination)[index].value) : ''}}</span></td> 
					<td><span></span></td>
					<td><span>正常</span></td>
					<td><span></span></td>
				</tr>
				<tr v-for="(item,index) in info.newHealthExaminationReportEntityRes && info.newHealthExaminationReportEntityRes.auxiliaryExamination && JSON.parse(info.newHealthExaminationReportEntityRes.auxiliaryExamination) || info.auxiliaryExamination && JSON.parse(info.auxiliaryExamination)" :key="'b'+index" v-if="index > 2">
					<td><span>{{item.name}}</span></td>
					<td><span></span></td>
					<td><span></span></td>
					<td><span>{{item.value == '-1'?'未填写':item.value}}</span></td> 
					<td><span></span></td>
					<td><span>正常</span></td>
					<td><span></span></td>
				</tr>
			</table>
		</div>
		<image :src="base64"></image>
	</div>
</template>

<script>
	import html2canvas from 'html2canvas';
	export default {
		props:{
			info:{
				type: Object,
				default:function(){
					return {}
				}
			}
		},
		name:'reportImgType2',
		data() {
			return {
				base64: '',
				arr:[
					{name:'身高m',key:'height',va:'正常'}, 
					{name:'体重Kg',key:'weight',va:'54.1-69.9'}, 
					{name:'体重指数Kg/m²',key:'bodyIndex',va:'18.5-23.9'}, 
					{name:'腰围cm',key:'waist',va:'男＜90、女＜85'}, 
					{name:'血压mmHg',key:'bloodPressure',va:'90-139/60-89'}, 
					{name:'空腹血糖<br/>mmol/l',key:'bloodGlucose',va:'2.8＜GLU＜6.1'}, 
					{name:'餐后2小时血糖<br/>mmol/l',key:'towBloodGlucose',va:'PBG＜7.8'}, 
					{name:'总胆固醇<br/>mmol/l',key:'cholesterol',va:'TC＜5.18'}, 
					{name:'甘油三酯<br/>mmol/l',key:'triacylglycerol',va:'TG＜1.7'}, 
					{name:'高密度脂蛋白胆固醇<br/>mmol/l',key:'highCholesterol',va:'HDL-C＞1.0'}, 
					{name:'低密度脂蛋白胆固醇<br/>mmol/l',key:'lowCholesterol',va:'LDL-C＜3.37'}, 
				]
			}
		},
		methods:{
			toImg(dom) {
				var dom = document.querySelector('#screenshot') // 获取dom元素
				return new Promise((resolve,reject)=>{
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						this.base64 = canvas.toDataURL('image/png')
						resolve(canvas.toDataURL('image/png'))
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: fixed;
		width: 1032px !important;
		height: 1566px !important;
		margin: 0 auto;
		left: 60px;
		z-index: 10000;
		top: -10000px;
		// top: 30px;
		#screenshot{
			padding:10px;
		}
		.title {
			color: #00B25C;
			font-size: 48px;
			font-weight: bold;
			margin-top: 54px;
		}
		table{
			width: 100%;
			margin-top: 50px;
			border-collapse: collapse;
			tr {
				font-weight: normal;
				text-align: center;	
				width: 100%;
				margin-top: -1px;
				th{
					background-color: #00C481;
					color: #FFFFFF;
					border-radius:10px 10px 0 0;
					font-size: 26px;
					font-weight: 500;
					padding: 0;
					&:nth-of-type(1){
						width: 270px;
					}
					span{
						display: block;
						min-height: 80px;
						line-height: 80px;
						text-align: center;
						border-left: 1px solid #fff;
						border-radius:10px 10px 0 0;
						margin-left: -1px;
					}
					&:nth-last-child(1){
						span{
							border-right: 1px solid #00C481;
						}
					}
					&:nth-of-type(1){
						span{
							border-left: 1px solid #00C481;
						}
					}
				}
				td {
					color: #00C481;
					font-size: 20px;
					padding: 0;
					span{
						display: flex;
						min-height: 58px;
						align-items: center;
						justify-content: center;
						border-left: 1px solid #00C481;
						border-top: 1px solid #00C481;
						margin-left: -1px;
						&:nth-last-child(1){
							border-right: 1px solid #00C481;
						}
					}
				}
				&:nth-last-child(1){
					span{
						border-bottom: 1px solid #00C481;
					}
				}
			}
			tr:nth-child(even) td {
				background-color: #E2FBEF;
			}
			
			tr:nth-child(odd) td {
				background-color: #F6FFFB;
			}
		}
	}
</style>
